<template>
  <div>
    <el-container class="register-container">
      <el-header style="height: 40px;background-color: unset">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          style="width: 500px;height:0px;"
        >
          <el-menu-item
            index="1"
            class="el-icon-house"
            @click="goHomepage"
            style="background-color: unset"
          >
            首页</el-menu-item
          >

          <el-menu-item
            index="2"
            class="el-icon-user"
            @click="goUserpage"
            style="background-color: unset"
          >
            用户登录页</el-menu-item
          >

          <el-menu-item
            index="3"
            class="el-icon-user-solid"
            @click="goManagepage"
            style="background-color: unset"
          >
            管理员登录页</el-menu-item
          >
        </el-menu>
      </el-header>

      <el-main style="margin-top:20px;padding: 0%;height: 860px;">
        <router-view
          @getUserName="getUserName"
          :userName="userName"
          @getUserId="getUserId"
          :userId="userId"
          @getAdminName="getAdminName"
          :adminName="adminName"
        ></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userName: '',
      userId: '',
      adminName: ''
    }
  },
  methods: {
    getUserName (name) {
      this.userName = name
    },
    getUserId (id) {
      this.userId = id
    },
    getAdminName (name) {
      this.adminName = name
    },
    goHomepage () {
      this.$router.push({ name: 'homepage' }).catch(() => {})
    },
    goUserpage () {
      this.$router.push({ name: 'userpage' }).catch(() => {})
    },
    goManagepage () {
      this.$router.push({ name: 'managepage' }).catch(() => {})
    },
    activeIndex () {}
  }
}
</script>

<style scoped>
.register-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url('../assets/maomi.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
